<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 王晓阳
  Date: 2024/4/27
  Time: 11:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="webjars/layui/2.6.8/layui.js"></script>
    <link rel="stylesheet" href="webjars/layui/2.6.8/css/layui.css" media="all">
</head>
<body>
    <div class="layui-container">
        <%--条件查询--%>
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">查询条件</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-form"  id="searchForm" lay-filter="searchForm">
                        <div class="layui-inline" >
                            <div class="layui-input-inline">
                                <input type="text" name="noticetitle" placeholder="请输入公告标题" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <button class="layui-btn" onclick="search()" >查询</button>
                        </div>
                        <div class="layui-inline" >
                            <button type="reset" onclick="chongzhi()" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table id="plotTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>
        <%--修改页面--%>
        <div id="update" style="display:none;padding:20px">
            <form class="layui-form" id="updateForm" lay-filter="updateForm">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: -10px">
                        <textarea name="noticetext" class="layui-textarea" style="height: 250px" readonly></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <%--头部工具栏，添加--%>
  <%--  <script type="text/html" id="headTool">
        <button class="layui-btn">消息通知</button>
    </script>--%>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="update">内容</a>
        </div>
    </script>
    <script>
        let $=layui.$

        //渲染表格
        layui.use(function (){
            let table=layui.table;
            table.render({
                id:"one",
                elem:"#plotTable",
                page : true,
                limit : 5,
                limits : [5,10,15,20],
                method : "post",
                contentType : "application/json",
                url:"/Site/Notice/selectnotice",
                toolbar: "#headTool",
                cols:[[
                    {field:'number',align: 'center',type:'numbers',title:"编号"},
                    {field:'id',hide:true,align: 'center',title:"编号"},
                    {field:'noticetitle',align: 'center',title:"公告标题"},
                    {field:'noticetext',hide:true,align: 'center',title:"公告内容"},
                    {field:'noticeimg',align: 'center',title:"公告图片",templet(d) {
                        return d.noticeimg == null ? "-" : "<img src='/"+d.noticeimg+"' width='40px'/>";
                    }},
                    {field:'notice',hide:true,align: 'center',title:"公告状态"},
                    {field:'createtime',align: 'center',title:"发布时间"},
                    {field:'plot',align: 'center',title:"小区",templet(d){
                        return d.plot.plotname == null ? "-" : d.plot.plotname;
                    }},
                    {fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
            })
            //监听行工具栏事件
            table.on("tool(plotTables)",function (obj){
                if(obj.event == "update"){
                    updates(obj);
                }
            })
        })

        //修改
        function updates(obj){
            //先赋值
            layui.form.val('updateForm', obj.data);

            console.log(obj.data)
            //弹窗
            layui.layer.open({
                type : 1,
                title : "内容",
                area:["500px","400px"],
                content: $("#update"),
                icon : 3
            });
        }

        //点击去查询
        function search(){
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            console.log(where)
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('one',{where : where});
        }
        //点击重置
        function chongzhi(){
            $("[name=noticetitle]").val("");

            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('one',{where : where});
        }

    </script>
</body>
</html>
